<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* position 属性指定了元素的定位类型  
            :relative 相对定位   
            ：absolute 绝对定位  会随着页面滚动
            ：fixed   固定定位  固定在页面固定位置
            其中 绝对定位和固定定位会脱离文档流
        提示：设置定位之后，相对定位和绝对定位他是相对于具有定位的父级元素进行调整，
        如果父级元素不存在定位，则继续向上级寻找，直到顶层文档3
        Z-index:属性设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
        */
        .div1 {
            width: 200px;
            height: 200px;
            background-color: red;
            position: relative;
            left: 200px;
            top: 100px;
        }

        .div2 {
            width: 200px;
            height: 200px;
            background-color: rgb(179, 255, 0);
            position: absolute;
            left: 200px;
            top: 100px;

        }

        .div3 {
            width: 200px;
            height: 200px;
            background-color: rgb(55, 0, 255);
            position: fixed;
            right: 100px;
            bottom: 100px;

        }
    </style>

</head>

<body>
    <div class="div1"></div>

    <div class="div2"></div>

    <div class="div3"></div>

</body>

</html>